<script setup>
import { ref } from 'vue'

const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)

// 使用 <script setup>
defineProps({
  percentage: Number
})

const liOptions = ref([
  {
    title: 'GPTzero',
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48ZyBmaWxsPSdub25lJz48Y2lyY2xlIGN4PScxMicgY3k9JzEyJyByPScxMicgZmlsbD0nIzUwQTBGRicvPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J00xMy41IDEyYTEuNSAxLjUgMCAxMS0zIDAgMS41IDEuNSAwIDAxMyAwWicvPjxwYXRoIGZpbGw9JyNmZmYnIGZpbGwtcnVsZT0nZXZlbm9kZCcgZD0nTTEyIDE1LjVhMy41IDMuNSAwIDEwMC03IDMuNSAzLjUgMCAwMDAgN1ptMCAxLjVhNSA1IDAgMTAwLTEwIDUgNSAwIDAwMCAxMFonIGNsaXAtcnVsZT0nZXZlbm9kZCcvPjxwYXRoIGZpbGw9JyNmZmYnIGZpbGwtcnVsZT0nZXZlbm9kZCcgZD0nTTExLjk5NiA0LjI1YTcuNzUgNy43NSAwIDEwNy4zOTggMTAuMDY1aC0zLjE0OGEuNzUuNzUgMCAwMTAtMS41aDUuMDA5bC0uMTY2Ljg4N2MtLjc5OSA0LjI5NS00LjU2NSA3LjU0OC05LjA5MyA3LjU0OGE5LjI1IDkuMjUgMCAxMTYuMTY3LTE2LjE0NS43NS43NSAwIDExLTEgMS4xMTggNy43MTggNy43MTggMCAwMC01LjE2Ny0xLjk3M1onIGNsaXAtcnVsZT0nZXZlbm9kZCcvPjwvZz48L3N2Zz4='
  },
  {
    title: 'Copyleaks',
    img: ''
  },
  {
    title: 'ZeroGPT',
    img: ''
  },
  {
    title: 'Crossplag',
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48ZyBmaWxsPSdub25lJz48cmVjdCB3aWR0aD0nMTgnIGhlaWdodD0nMTgnIHg9JzMnIHk9JzMnIGZpbGw9JyNmZmYnIHJ4PSc5Jy8+PHBhdGggZmlsbD0nIzBCRicgZD0nTTExLjMzIDEwLjQwNmMtLjI3NS0xLjkxNy0uMTEyLTMuMTQ0LjIxNi0zLjg1LjI5NS0uNjM3LjcxNC0uODUzIDEuMjE5LS44NTMuOSAwIDIuMDczLjc4MSAyLjU3NSAyLjE1NWEzLjgxNiAzLjgxNiAwIDAwLTEuNDY5LjkzYy0uNDcuNDY3LS42OSAxLjEzNi0uODA2IDEuNzQ2LS4xMjEuNjM1LS4xNTggMS4zNTItLjE1OCAyLjA0OCAwIC43LjAzNyAxLjQxMy4wNzMgMi4wNDNsLjAxMi4yMTJjLjAzMi41NTEuMDU4IDEuMDEyLjA1OCAxLjM2MyAwIC42ODMtLjIzMSAxLjI5Ny0uNjA1IDEuNjY4LS4zMzUuMzM0LS44NzIuNTYzLTEuNzU0LjM0NC0uNTUtLjEzNy0uOTQzLS41Ny0xLjE1LTEuMTc5LS4xNzItLjUwMi0uMTczLTEuMDA1LS4wODctMS4zNS45OTQtLjU3OCAyLjMyNC0yLjE2MyAxLjg3Ny01LjI3N1onLz48cGF0aCBmaWxsPScjMEJGJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGQ9J003LjAwMiAxYTQgNCAwIDAwLTMuNjc2IDIuNDIzbC0zLjAwMiA3YTQgNCAwIDAwMCAzLjE1NGwzLjAwMiA3QTQgNCAwIDAwNy4wMDIgMjNoOS45OTVhNCA0IDAgMDAzLjY3Ni0yLjQyM2wzLjAwMy03YTQgNCAwIDAwMC0zLjE1NGwtMy4wMDMtN0E0IDQgMCAwMDE2Ljk5NyAxSDcuMDAyWm0uNjg1IDE1LjE3NmE0LjEyIDQuMTIgMCAwMS0uODk3LS4wMiAzLjIyNSAzLjIyNSAwIDAxLTEuNjIyLS42OWMtLjUxNy0uNDItLjkyOC0xLjAyNS0xLjE5OC0xLjgzMy0uMjgzLS44NDMtLjI3LTEuNjI3LjAyMy0yLjMxLjI4Ny0uNjcyLjgwNC0xLjE1MyAxLjM2MS0xLjQ4NSAxLjA4OC0uNjQ3IDIuNTEtLjgzNiAzLjUxNC0uNzI1bC0uMTkgMS42OTJjLS43MDYtLjA3OC0xLjczNy4wNzMtMi40NDYuNDk1LS4zNC4yMDItLjU1OC40MzgtLjY2Ni42OS0uMTAyLjI0LS4xNDcuNTg2LjAyNyAxLjEwNS4xODUuNTU0LjQzLjg2OS42NTggMS4wNTQuMjI5LjE4Ni40OS4yODIuNzcuMzIuNTk1LjA4MSAxLjE5OC0uMTEgMS40NjQtLjIwNC4xNjItLjA1OCAxLjU1NS0uODEzIDEuMTUyLTMuNjE4LS4yOTUtMi4wNTUtLjE3My0zLjY2Ni4zNTUtNC44MDVDMTAuNTUyIDQuNjM0IDExLjU2IDQgMTIuNzY1IDRjMS44MTYgMCAzLjU3MyAxLjQ1IDQuMjMzIDMuNDJsLjA3LjI5OWMuMTEuMDE3LjIxOC4wNC4zMjQuMDY2IDEuMDU3LjI2MyAxLjk5Ny45NjggMi40MTEgMS43OTMuMzUxLjY5OS41NSAxLjYwOS4zNTUgMi40OC0uMjA3LjkyNy0uODQ2IDEuNzMzLTEuOTkgMi4xMTItLjg0LjI3OS0xLjY0LjI3NC0yLjIzMi4yMDlhNy41MjggNy41MjggMCAwMS0uNzMzLS4xMmwtLjEyMy0uMDI2YTUuOTc4IDUuOTc4IDAgMDAtLjEyMi0uMDI1LjY1NC42NTQgMCAwMC4wODguMDA2VjEyLjUxYy4xMiAwIC4yNDUuMDI2LjI4Ny4wMzVsLjAwNy4wMDJhMTQuNDg0IDE0LjQ4NCAwIDAxLjIxNi4wNDVjLjE1Ni4wMzMuMzQ3LjA3LjU2Ny4wOTQuNDQ0LjA0OC45NzYuMDQzIDEuNTA0LS4xMzIuNTY3LS4xODguNzgzLS41MTYuODYxLS44NjYuMDktLjQwNS4wMDQtLjkxMy0uMjE1LTEuMzUtLjE1Ni0uMzEtLjY0Mi0uNzQtMS4yOTYtLjkwMy0uNTk3LS4xNDgtMS4yNzctLjA2LTEuODk3LjU1Ni0uMS4xLS4yMzcuMzUzLS4zMzQuODYtLjA5My40ODMtLjEyOCAxLjA3OC0uMTI4IDEuNzMgMCAuNjQ4LjAzNSAxLjMxOC4wNyAxLjk0N2wuMDEyLjIxNGMuMDMxLjUzOC4wNiAxLjA1NC4wNiAxLjQ1NyAwIDEuMDItLjMzOCAyLjEwOS0xLjEwNSAyLjg3Mi0uODA2LjgwMi0xLjk4IDEuMTQtMy4zNzkuNzkyLTEuMjc0LS4zMTctMi4wMjItMS4zMDMtMi4zNTYtMi4yODRhNC40MDcgNC40MDcgMCAwMS0uMjMzLTEuNDA0WicgY2xpcC1ydWxlPSdldmVub2RkJy8+PC9nPjwvc3ZnPg=='
  },
  {
    title: 'Sapling',
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48ZyBmaWxsPScjNTI1Rjk5Jz48cGF0aCBkPSdNMy4xODQgNi4wOGExLjg1NyAxLjg1NyAwIDAwLTIuNjM4IDAgMS44ODUgMS44ODUgMCAwMDAgMi42NTVMMTAuMiAxOC40NWMuNzI4LjczMyAxLjkxLjczMyAyLjYzOCAwYTEuODg1IDEuODg1IDAgMDAwLTIuNjU0TDMuMTg0IDYuMDhabTEwLjQ5MiAyLjEyNGExLjg1NyAxLjg1NyAwIDAwLTIuNjM4IDAgMS44ODUgMS44ODUgMCAwMDAgMi42NTVsNC40ODggNC41MTZjLjcyOC43MzMgMS45MS43MzMgMi42MzcgMGExLjg4NiAxLjg4NiAwIDAwMC0yLjY1NWwtNC40ODctNC41MTZaJy8+PHBhdGggZD0nTTIzLjQ1NCA4LjIwNGExLjg4NiAxLjg4NiAwIDAwMC0yLjY1NCAxLjg1NyAxLjg1NyAwIDAwLTIuNjM4IDBsLTEwLjEgMTAuMTYzYTEuODg2IDEuODg2IDAgMDAwIDIuNjU1Yy43My43MzMgMS45MS43MzMgMi42MzkgMEwyMy40NTQgOC4yMDRaJy8+PC9nPjwvc3ZnPg=='
  },
  {
    title: 'Writer',
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48ZyBmaWxsPSdub25lJz48ZyBjbGlwLXBhdGg9J3VybCgjbG9nby13cml0ZXJfYSknPjxwYXRoIGZpbGw9JyMwMDAnIGQ9J00xMiAyMy45MjJjNi42MjcgMCAxMi01LjMwOCAxMi0xMS44NTZDMjQgNS41MiAxOC42MjcuMjExIDEyIC4yMTFTMCA1LjUxOSAwIDEyLjA2NmMwIDYuNTQ4IDUuMzczIDExLjg1NiAxMiAxMS44NTZaJy8+PHBhdGggc3Ryb2tlPScjZmZmJyBzdHJva2Utb3BhY2l0eT0nLjgnIGQ9J00yMy41IDEyLjA2NmMwIDYuMjY2LTUuMTQzIDExLjM1Ni0xMS41IDExLjM1NlMuNSAxOC4zMzIuNSAxMi4wNjYgNS42NDMuNzExIDEyIC43MTEgMjMuNSA1LjggMjMuNSAxMi4wNjZaJy8+PHBhdGggZmlsbD0nI2ZmZicgZmlsbC1ydWxlPSdldmVub2RkJyBkPSdtMTcuNjggMTQuODg0IDEuODQzLTcuNTEyaC0zLjY4NmwxLjg0MyA3LjUxMlptLTcuNS03LjUxMiAyLjU2MiAxMC40NDZoMy43MDJMMTMuODgxIDcuMzcySDEwLjE4Wm0tMS45NTYgMEg0LjUyMmwyLjU2MyAxMC40NDZoMy43MDJMOC4yMjQgNy4zNzJaJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSdsb2dvLXdyaXRlcl9hJz48cGF0aCBmaWxsPScjZmZmJyBkPSdNMCAwaDI0djI0SDB6Jy8+PC9jbGlwUGF0aD48L2RlZnM+PC9nPjwvc3ZnPg=='
  },
  {
    title: 'BrandWell',
    img: 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48ZyBmaWxsPSdub25lJz48cGF0aCBmaWxsPScjQUY0NEVGJyBkPSdtNy4yNjQgOS42NDgtMS44MjguNjUzYTIuMzE4IDIuMzE4IDAgMDAtLjc0OS40M2MtLjQxMS4zNTItLjY2Ny44NDMtLjU5NiAxLjQuMTIxLjk0OC41MzMgMS44MzkuOTQgMi43MTguNTg4IDEuMjcgMS4xNjUgMi41MTguODM0IDMuODc5LS4xOTguODE2LS43MjMgMS42NzQtMS43NjggMi42MDNhMTMuNjY5IDEzLjY2OSAwIDAxLTEuMzA1IDEuMDA4YzIuNDU3LS40OTQgMy45MDMtMS4xNzYgNC43NDMtMS45Ljg0NS0uNzI3IDEuMTc1LTEuNTgxIDEuMjItMi42NjkuMDQ3LTEuMTY2LS4yMzctMi41MjMtLjYzMi00LjE2OWwtLjEyMS0uNTAzYy0uMjYtMS4wNzQtLjU0My0yLjI0My0uNzM4LTMuNDVaJy8+PHBhdGggZmlsbD0nI0Y5NDE2NicgZmlsbC1vcGFjaXR5PScuNScgZD0nbTcuMjY0IDkuNjQ4LTEuODI4LjY1M2EyLjMxOCAyLjMxOCAwIDAwLS43NDkuNDNjLS40MTEuMzUyLS42NjcuODQzLS41OTYgMS40LjEyMS45NDguNTMzIDEuODM5Ljk0IDIuNzE4LjU4OCAxLjI3IDEuMTY1IDIuNTE4LjgzNCAzLjg3OS0uMTk4LjgxNi0uNzIzIDEuNjc0LTEuNzY4IDIuNjAzYTEzLjY2OSAxMy42NjkgMCAwMS0xLjMwNSAxLjAwOGMyLjQ1Ny0uNDk0IDMuOTAzLTEuMTc2IDQuNzQzLTEuOS44NDUtLjcyNyAxLjE3NS0xLjU4MSAxLjIyLTIuNjY5LjA0Ny0xLjE2Ni0uMjM3LTIuNTIzLS42MzItNC4xNjlsLS4xMjEtLjUwM2MtLjI2LTEuMDc0LS41NDMtMi4yNDMtLjczOC0zLjQ1WicvPjxwYXRoIGZpbGw9J3VybCgjbG9nby1icmFuZHdlbGxfYSknIGQ9J203LjI2NCA5LjY0OC0xLjgyOC42NTNhMi4zMTggMi4zMTggMCAwMC0uNzQ5LjQzYy0uNDExLjM1Mi0uNjY3Ljg0My0uNTk2IDEuNC4xMjEuOTQ4LjUzMyAxLjgzOS45NCAyLjcxOC41ODggMS4yNyAxLjE2NSAyLjUxOC44MzQgMy44NzktLjE5OC44MTYtLjcyMyAxLjY3NC0xLjc2OCAyLjYwM2ExMy42NjkgMTMuNjY5IDAgMDEtMS4zMDUgMS4wMDhjMi40NTctLjQ5NCAzLjkwMy0xLjE3NiA0Ljc0My0xLjkuODQ1LS43MjcgMS4xNzUtMS41ODEgMS4yMi0yLjY2OS4wNDctMS4xNjYtLjIzNy0yLjUyMy0uNjMyLTQuMTY5bC0uMTIxLS41MDNjLS4yNi0xLjA3NC0uNTQzLTIuMjQzLS43MzgtMy40NVonLz48cGF0aCBmaWxsPSd1cmwoI2xvZ28tYnJhbmR3ZWxsX2IpJyBkPSdtNy4yNjQgOS42NDgtMS44MjguNjUzYTIuMzE4IDIuMzE4IDAgMDAtLjc0OS40M2MtLjQxMS4zNTItLjY2Ny44NDMtLjU5NiAxLjQuMTIxLjk0OC41MzMgMS44MzkuOTQgMi43MTguNTg4IDEuMjcgMS4xNjUgMi41MTguODM0IDMuODc5LS4xOTguODE2LS43MjMgMS42NzQtMS43NjggMi42MDNhMTMuNjY5IDEzLjY2OSAwIDAxLTEuMzA1IDEuMDA4YzIuNDU3LS40OTQgMy45MDMtMS4xNzYgNC43NDMtMS45Ljg0NS0uNzI3IDEuMTc1LTEuNTgxIDEuMjItMi42NjkuMDQ3LTEuMTY2LS4yMzctMi41MjMtLjYzMi00LjE2OWwtLjEyMS0uNTAzYy0uMjYtMS4wNzQtLjU0My0yLjI0My0uNzM4LTMuNDVaJy8+PHBhdGggZmlsbD0nI0FGNDRFRicgZD0nbTE0LjkxIDQuNDUyLTQuODE1IDEuNDA0Yy0xLjA1NS4zMDgtMS44MTIgMS4yNi0xLjcwOSAyLjM1My4xNSAxLjU3LjUyMyAzLjExNC44NzkgNC41ODYuNzY4IDMuMTc4IDEuNDU3IDYuMDI3LS4zNTggOC4xMUw5IDIwLjg3OWE2LjE2OCA2LjE2OCAwIDAwNC40OTUtNS4yMUwxNC43NSA1LjI3Yy4wMzMtLjI4LjA4Ny0uNTUzLjE2LS44MThaJy8+PHBhdGggZmlsbD0nI0Y5NDE2NicgZmlsbC1vcGFjaXR5PScuNScgZD0nbTE0LjkxIDQuNDUyLTQuODE1IDEuNDA0Yy0xLjA1NS4zMDgtMS44MTIgMS4yNi0xLjcwOSAyLjM1My4xNSAxLjU3LjUyMyAzLjExNC44NzkgNC41ODYuNzY4IDMuMTc4IDEuNDU3IDYuMDI3LS4zNTggOC4xMUw5IDIwLjg3OWE2LjE2OCA2LjE2OCAwIDAwNC40OTUtNS4yMUwxNC43NSA1LjI3Yy4wMzMtLjI4LjA4Ny0uNTUzLjE2LS44MThaJy8+PHBhdGggZmlsbD0ndXJsKCNsb2dvLWJyYW5kd2VsbF9jKScgZD0nbTE0LjkxIDQuNDUyLTQuODE1IDEuNDA0Yy0xLjA1NS4zMDgtMS44MTIgMS4yNi0xLjcwOSAyLjM1My4xNSAxLjU3LjUyMyAzLjExNC44NzkgNC41ODYuNzY4IDMuMTc4IDEuNDU3IDYuMDI3LS4zNTggOC4xMUw5IDIwLjg3OWE2LjE2OCA2LjE2OCAwIDAwNC40OTUtNS4yMUwxNC43NSA1LjI3Yy4wMzMtLjI4LjA4Ny0uNTUzLjE2LS44MThaJy8+PHBhdGggZmlsbD0ndXJsKCNsb2dvLWJyYW5kd2VsbF9kKScgZD0nbTE0LjkxIDQuNDUyLTQuODE1IDEuNDA0Yy0xLjA1NS4zMDgtMS44MTIgMS4yNi0xLjcwOSAyLjM1My4xNSAxLjU3LjUyMyAzLjExNC44NzkgNC41ODYuNzY4IDMuMTc4IDEuNDU3IDYuMDI3LS4zNTggOC4xMUw5IDIwLjg3OWE2LjE2OCA2LjE2OCAwIDAwNC40OTUtNS4yMUwxNC43NSA1LjI3Yy4wMzMtLjI4LjA4Ny0uNTUzLjE2LS44MThaJy8+PHBhdGggZmlsbD0ndXJsKCNsb2dvLWJyYW5kd2VsbF9lKScgZmlsbC1vcGFjaXR5PScuNScgZD0nTTE2LjAzOSA1LjQyNmE0LjM4NiA0LjM4NiAwIDAxMy41NzItMy43OWwzLjQzMi0uNjIzYS44MDQuODA0IDAgMDEuOTIzLjk5bC00LjIwMiAxNi41MmE2LjgzNiA2LjgzNiAwIDAxLTYuNjI1IDUuMTVIMy4wMjFsNS4xOTUtMS4yMzMgMS4xMjgtLjMwOWE3LjQ2NyA3LjQ2NyAwIDAwNS40NC02LjMwN0wxNi4wNCA1LjQyNlonLz48cGF0aCBmaWxsPSd1cmwoI2xvZ28tYnJhbmR3ZWxsX2YpJyBkPSdNMTYuMDM5IDUuNDI2YTQuMzg2IDQuMzg2IDAgMDEzLjU3Mi0zLjc5bDMuNDMyLS42MjNhLjgwNC44MDQgMCAwMS45MjMuOTlsLTQuMjAyIDE2LjUyYTYuODM2IDYuODM2IDAgMDEtNi42MjUgNS4xNUgzLjAyMWw1LjE5NS0xLjIzMyAxLjEyOC0uMzA5YTcuNDY3IDcuNDY3IDAgMDA1LjQ0LTYuMzA3TDE2LjA0IDUuNDI2WicvPjxwYXRoIGZpbGw9J3VybCgjbG9nby1icmFuZHdlbGxfZyknIGQ9J00xNi4wMzkgNS40MjZhNC4zODYgNC4zODYgMCAwMTMuNTcyLTMuNzlsMy40MzItLjYyM2EuODA0LjgwNCAwIDAxLjkyMy45OWwtNC4yMDIgMTYuNTJhNi44MzYgNi44MzYgMCAwMS02LjYyNSA1LjE1SDMuMDIxbDUuMTk1LTEuMjMzIDEuMTI4LS4zMDlhNy40NjcgNy40NjcgMCAwMDUuNDQtNi4zMDdMMTYuMDQgNS40MjZaJy8+PHBhdGggZmlsbD0ndXJsKCNsb2dvLWJyYW5kd2VsbF9oKScgZD0nTTE2LjAzOSA1LjQyNmE0LjM4NiA0LjM4NiAwIDAxMy41NzItMy43OWwzLjQzMi0uNjIzYS44MDQuODA0IDAgMDEuOTIzLjk5bC00LjIwMiAxNi41MmE2LjgzNiA2LjgzNiAwIDAxLTYuNjI1IDUuMTVIMy4wMjFsNS4xOTUtMS4yMzMgMS4xMjgtLjMwOWE3LjQ2NyA3LjQ2NyAwIDAwNS40NC02LjMwN0wxNi4wNCA1LjQyNlonLz48cGF0aCBmaWxsPSd1cmwoI2xvZ28tYnJhbmR3ZWxsX2kpJyBkPSdNMTYuMDM5IDUuNDI2YTQuMzg2IDQuMzg2IDAgMDEzLjU3Mi0zLjc5bDMuNDMyLS42MjNhLjgwNC44MDQgMCAwMS45MjMuOTlsLTQuMjAyIDE2LjUyYTYuODM2IDYuODM2IDAgMDEtNi42MjUgNS4xNUgzLjAyMWw1LjE5NS0xLjIzMyAxLjEyOC0uMzA5YTcuNDY3IDcuNDY3IDAgMDA1LjQ0LTYuMzA3TDE2LjA0IDUuNDI2WicvPjxwYXRoIGZpbGw9JyM5ODJGRkYnIGQ9J001LjAyOCAxOC4wMDZhMi41MTQgMi41MTQgMCAxMC01LjAyOCAwIDIuNTE0IDIuNTE0IDAgMDA1LjAyOCAwWicvPjxwYXRoIGZpbGw9JyNFQzMyNjknIGQ9J001LjAyOCAxOC4wMDZhMi41MTQgMi41MTQgMCAxMC01LjAyOCAwIDIuNTE0IDIuNTE0IDAgMDA1LjAyOCAwWicvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0nbG9nby1icmFuZHdlbGxfYScgeDE9JzEzLjQ2JyB4Mj0nLS43OCcgeTE9JzUuODgzJyB5Mj0nMTkuNjIxJyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PHN0b3Agc3RvcC1jb2xvcj0nI0UyMTlCRScvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nIzZGNDRFRicvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSdsb2dvLWJyYW5kd2VsbF9iJyB4MT0nOC40OTYnIHgyPScxMS43MzQnIHkxPSc0LjQ5NScgeTI9JzE3LjYyMycgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnPjxzdG9wIHN0b3AtY29sb3I9JyNCNDEyRkYnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyM2RjI3RTAnLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0nbG9nby1icmFuZHdlbGxfYycgeDE9JzEzLjQ2JyB4Mj0nLS43NzknIHkxPSc1Ljg4MycgeTI9JzE5LjYyMScgZ3JhZGllbnRVbml0cz0ndXNlclNwYWNlT25Vc2UnPjxzdG9wIHN0b3AtY29sb3I9JyNFMjE5QkUnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyM2RjQ0RUYnLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0nbG9nby1icmFuZHdlbGxfZCcgeDE9JzguNDk2JyB4Mj0nMTEuNzM0JyB5MT0nNC40OTUnIHkyPScxNy42MjMnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJz48c3RvcCBzdG9wLWNvbG9yPScjQjQxMkZGJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjNkYyN0UwJy8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9J2xvZ28tYnJhbmR3ZWxsX2UnIHgxPScxOC4wMzcnIHgyPScxOC4wMzcnIHkxPSctMTcuMTg4JyB5Mj0nMjMuNjc0JyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PHN0b3Agc3RvcC1jb2xvcj0nI0Q0MjlFQycvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI0FGNDRFRicvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSdsb2dvLWJyYW5kd2VsbF9mJyB4MT0nNy4zOTEnIHgyPScyNC4xMzgnIHkxPSc3LjMxNScgeTI9JzguMTkzJyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PHN0b3Agc3RvcC1jb2xvcj0nI0ZGNDA1QScvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI0U5OEMwMCcvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSdsb2dvLWJyYW5kd2VsbF9nJyB4MT0nMTkuMjE5JyB4Mj0nMTMuNzUnIHkxPScxMS4yNDMnIHkyPScyMC4wMjgnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJz48c3RvcCBzdG9wLWNvbG9yPScjQUY0NkYwJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjODAxMUM1Jy8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9J2xvZ28tYnJhbmR3ZWxsX2gnIHgxPScyNi4wNzInIHgyPScyNC43ODInIHkxPSctMS41ODQnIHkyPScyMi40MzYnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJz48c3RvcCBzdG9wLWNvbG9yPScjRkY0MDVBJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjQTEyMkVGJy8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9J2xvZ28tYnJhbmR3ZWxsX2knIHgxPScyNi4wNzInIHgyPScyNS4wMTYnIHkxPScuODI4JyB5Mj0nMjIuNTY2JyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZSc+PHN0b3Agc3RvcC1jb2xvcj0nI0VDMzI2OScvPjxzdG9wIG9mZnNldD0nMScgc3RvcC1jb2xvcj0nI0ExMjJFRicvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvZz48L3N2Zz4='
  }
])
</script>

<template>
  <div class="checkResult bg-white p-6 rounded-lg">
    <div v-if="percentage < 100">
      <div class="font-semibold">AI 检查概率</div>
      <div class="flex justify-between items-center text-sm mt-3 md:mt-2" style="margin-bottom: 5px">
        <div>检查文本是否为AI生成的。请等待5-10秒..</div>
        <!-- <div>7.0%</div> -->
      </div>
      <el-progress :percentage="percentage" />
    </div>
    <div v-else>
      <div class="py-3 px-4 border rounded-lg flex justify-between items-center border-[#B7EB8F] bg-[#F6FFED]">
        <div class="flex items-center font-semibold gap-x-2">
          <div class="w-7 h-7"><span class="w-7 h-7 i-com--success"></span></div>
          <div class="flex flex-col gap-y-1"><div>输出内容似乎人工编写。</div></div>
        </div>
      </div>
    </div>
    <div class="mt-4">
      <div class="text-sm">检查结果:</div>
      <div class="flex justify-start mt-2">
        <ul class="flex flex-wrap items-center justify-center gap-x-5 gap-y-3 md:justify-start">
          <li class="flex items-center gap-x-2" v-for="(item, index) in liOptions" :key="index">
            <div class="flex items-center gap-x-1 bg-[#F6F8FA] rounded p-1">
              <div class="h-5 w-5">
                <div class="relative h-5 w-5">
                  <img
                    alt="ZeroGPT logo"
                    loading="lazy"
                    width="20"
                    height="20"
                    decoding="async"
                    data-nimg="1"
                    :src="item.img"
                    style="color: transparent"
                  />
                </div>
              </div>
              <div class="text-xs">
                <span>{{ item.title }}</span>
              </div>
            </div>
            <div class="w-5 h-5" v-if="percentage < 100"><span class="i-svg-spinners--180-ring-with-bg h-5 w-5"></span></div>
            <div class="w-5 h-5" v-else><span class="i-bx--check h-5 w-5 text-[#00C2A7]"></span></div>
          </li>
        </ul>
      </div>
      <ul class="pt-3 border-t border-[#DEE8F9] mt-3 flex items-center gap-x-6 flex-wrap gap-y-3">
        <li class="gap-x-1 flex items-center">
          <span class="i-bx--check text-[#00C2A7] w-5 h-5"></span><span class="text-sm">Human-written</span>
        </li>
        <li class="gap-x-1 flex items-center">
          <span class="i-cus--uncertain text-[#94A2AE] w-5 h-5"></span><span class="text-sm">50% Human-written</span>
        </li>
        <li class="gap-x-1 flex items-center">
          <span class="i-com--x text-[#FF4D4F] w-5 h-5"></span><span class="text-sm">AI-generated</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="less">
.checkResult {
  margin-top: 1.25rem;
  margin-left: 1rem;
  margin-right: 1rem;
}
:deep(.el-progress__text) {
  position: absolute;
  right: -18px;
  top: -20px;
}
.i-bx--check {
  --svg: url();
}
.i-bx--bxs-compass,
.i-bx--check {
  margin-top: 3px;
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48cGF0aCBmaWxsPSdibGFjaycgZD0nbTEwIDE1LjU4NmwtMy4yOTMtMy4yOTNsLTEuNDE0IDEuNDE0TDEwIDE4LjQxNGw5LjcwNy05LjcwN2wtMS40MTQtMS40MTR6Jy8+PC9zdmc+);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-svg-spinners--180-ring-with-bg {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTEyLDFBMTEsMTEsMCwxLDAsMjMsMTIsMTEsMTEsMCwwLDAsMTIsMVptMCwxOWE4LDgsMCwxLDEsOC04QTgsOCwwLDAsMSwxMiwyMFonIG9wYWNpdHk9Jy4yNScvPjxwYXRoIGZpbGw9J2JsYWNrJyBkPSdNMTIsNGE4LDgsMCwwLDEsNy44OSw2LjdBMS41MywxLjUzLDAsMCwwLDIxLjM4LDEyaDBhMS41LDEuNSwwLDAsMCwxLjQ4LTEuNzUsMTEsMTEsMCwwLDAtMjEuNzIsMEExLjUsMS41LDAsMCwwLDIuNjIsMTJoMGExLjUzLDEuNTMsMCwwLDAsMS40OS0xLjNBOCw4LDAsMCwxLDEyLDRaJz48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSd0cmFuc2Zvcm0nIGR1cj0nMC43NXMnIHJlcGVhdENvdW50PSdpbmRlZmluaXRlJyB0eXBlPSdyb3RhdGUnIHZhbHVlcz0nMCAxMiAxMjszNjAgMTIgMTInLz48L3BhdGg+PC9zdmc+);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-cus--uncertain {
  --svg: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxMiAxMicgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJz48ZyBmaWxsPSdibGFjayc+PHBhdGggZmlsbC1vcGFjaXR5PScuMjUnIGZpbGwtcnVsZT0nZXZlbm9kZCcgZD0nTTYgOS41YTMuNSAzLjUgMCAxMDAtNyAzLjUgMy41IDAgMDAwIDdabTAgMWE0LjUgNC41IDAgMTAwLTkgNC41IDQuNSAwIDAwMCA5WicgY2xpcC1ydWxlPSdldmVub2RkJy8+PHBhdGggZD0nTTYgMi41YTMuNSAzLjUgMCAxMDAgN3YxYTQuNSA0LjUgMCAwMTAtOXYxWicvPjwvZz48L3N2Zz4=);
}
.i-cus--uncertain,
.i-cus--unfavorite {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.i-com--x {
  --svg: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0OCA0OCcgd2lkdGg9JzQ4JyBoZWlnaHQ9JzQ4Jz48cGF0aCBmaWxsPSdibGFjaycgZD0nTTMzLjAwMiAxMiAyNCAyMWwtOS05LTMgMyA5IDktOSA5IDMgMyA5LTkgOS4wMDIgOSAzLTMtOS05IDktOS0zLTNaJy8+PC9zdmc+);
}
.i-com--x,
.i-com--x-circle {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.h-5 {
  height: 1.25rem;
}

.w-5 {
  width: 1.25rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.border-\[\#DEE8F9\] {
  --tw-border-opacity: 1;
  border-color: rgb(222 232 249 / var(--tw-border-opacity, 1));
}
.border-t {
  border-top-width: 1px;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
}
.items-center {
  align-items: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex {
  display: flex;
}
.mt-3 {
  margin-top: 0.75rem;
}
menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pt-3 {
  padding-top: 0.75rem;
}
.border-\[\#DEE8F9\] {
  --tw-border-opacity: 1;
  border-color: rgb(222 232 249 / var(--tw-border-opacity, 1));
}
.border-t {
  border-top-width: 1px;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem;
}
.items-center {
  align-items: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex {
  display: flex;
}
.mt-3 {
  margin-top: 0.75rem;
}
.gap-x-1 {
  -moz-column-gap: 0.25rem;
  column-gap: 0.25rem;
}
.text-\[\#00C2A7\] {
  --tw-text-opacity: 1;
  color: rgb(0 194 167 / var(--tw-text-opacity, 1));
}
.w-5 {
  width: 1.25rem;
}
.h-5 {
  height: 1.25rem;
}

.i-com--success {
  background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCcgd2lkdGg9JzI0JyBoZWlnaHQ9JzI0Jz48ZyBmaWxsPSdub25lJz48ZyBjbGlwLXBhdGg9J3VybCgjc3VjY2Vzc19hKSc+PGNpcmNsZSBjeD0nMTInIGN5PScxMicgcj0nMTInIGZpbGw9JyNmZmYnLz48cGF0aCBmaWxsPScjNTJDNDFBJyBkPSdNMjQgMTJhMTIgMTIgMCAxMS0yNCAwIDEyIDEyIDAgMDEyNCAwWm0tNS45NTUtNC41NDVhMS4xMjQgMS4xMjQgMCAwMC0xLjYyLjAzM2wtNS4yMSA2LjYzOC0zLjEzOS0zLjE0MWExLjEyNSAxLjEyNSAwIDAwLTEuNTkgMS41OWwzLjk2OSAzLjk3YTEuMTI0IDEuMTI0IDAgMDAxLjYxOC0uMDNsNS45ODgtNy40ODVhMS4xMjUgMS4xMjUgMCAwMC0uMDE0LTEuNTc1aC0uMDAyWicvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9J3N1Y2Nlc3NfYSc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTAgMGgyNHYyNEgweicvPjwvY2xpcFBhdGg+PC9kZWZzPjwvZz48L3N2Zz4=);
}
.i-com--smile01,
.i-com--success {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.w-7 {
  width: 1.75rem;
}
.h-7 {
  height: 1.75rem;
}
.bg-\[\#F6FFED\] {
  --tw-bg-opacity: 1;
  background-color: rgb(246 255 237 / var(--tw-bg-opacity, 1));
}
.border-\[\#B7EB8F\] {
  --tw-border-opacity: 1;
  border-color: rgb(183 235 143 / var(--tw-border-opacity, 1));
}
</style>
